<!--
 * @Author: 曹捷
 * @Date: 2019-08-23 16:16:02
 * @LastEditors: 曹捷
 * @LastEditTime: 2020-06-16 19:02:54
 * @Description: file content
 -->
<template>
  <div :class="`home flex-container  ${clazz}`">
    <scroll-view :class="[tabbarClass]" class="uni-swiper-tab back" id="tab-bar">
      <view
        :class="tabIndex==index ? 'active' : ''"
        :data-current="index"
        :id="tab.id"
        :key="tab.id"
        @click="tapTab"
        class="swiper-tab-list"
        v-for="(tab,index) in tabBars"
      >
        {{tab.name}}
        <span class="activelab"></span>
      </view>
    </scroll-view>
    <obit-search @search="search" v-if="hasSearch" v-model="keyword"></obit-search>
    <swiper :current="tabIndex" :duration="300" @change="changeTab" class="swiper-fixed swiper-box" id="scroll" ref="scroll">
      <swiper-item :key="0">
        <slot name="tabbar1"></slot>
      </swiper-item>
      <swiper-item :key="1">
        <slot name="tabbar2"></slot>
      </swiper-item>
    </swiper>
  </div>
</template>

<script>
import obitSearch from '@/components/obit-search/obit-search.vue'
export default {
  components: {
    obitSearch
  },
  props: {
    hasSearch: {
      type: Boolean,
      default: false
    },
    tabName1: {
      type: String,
      default: '通讯录'
    },
    tabName2: {
      type: String,
      default: '最近联系人'
    },
    clazz: {
      type: String
    },
    tabbarClass: {
      type: String,
      default: 'obit-swiper-tab'
    }
  },
  data() {
    return {
      keyword: '',
      firstLock: false,
      tabBars: [
        {
          name: this.tabName1,
          id: 0
        },
        {
          name: this.tabName2,
          id: 1
        }
      ],
      tabIndex: 0
    }
  },
  methods: {
    search(value) {
      this.$emit('search', { value: value, tabIndex: this.tabIndex })
    },
    getIndex() {
      return { value: this.keyword, tabIndex: this.tabIndex }
    },
    changeTab(e) {
      this.tabIndex = e.detail.current
      if (this.tabIndex === 1) {
        this.firstLock = true
      }
      this.$emit('changeTab', this.tabIndex)
    },
    tapTab(e) {
      //点击tab-bar
      let tabIndex = e.target.dataset.current
      this.tabIndex = tabIndex
    }
  },
  mounted() {}
}
</script>

<style lang="scss">
.obit-swiper-tab {
  width: auto;
  margin: 0 20rpx;
}
</style>